<template>
	<view class="page-wrap" :data-theme="theme" :class="theme" :style="globalColor.style" ref="dynamicInfo">
		<HeadCustom :isSpace="false" linkId="usr133kn5vl09lqk" :linkData="linkData"></HeadCustom>
		<template v-if="dataList.length">
			<!-- swiper组件 -->
			<swiper class="swiper video-full" :vertical="true" @change="swiperChange" :current="dataIndex" circular>
				<template v-if="dataList.length">
					<swiper-item v-for="(item, index) in dataList" :key="item.videoId" @click="videoTap">
						<image v-if="index != dataIndex" class="video-full" :src="item.coverURL" mode="aspectFit"></image>
						<video
							v-if="index == dataIndex"
							id="myVideo"
							:muted="muted"
							class="video-full"
							:autoplay="true"
							:src="item.picture"
							:poster="item.coverURL"
							:show-fullscreen-btn="false"
							play-btn-position="center"
							:show-play-btn="false"
							:show-progress="false"
							:show-mute-btn="true"
							:enable-play-gesture="true"
							@play="videoPlay"
							@pause="videoPause"
							@ended="videoEnded"
						></video>
						<!-- <div @click.stop="playVideo">
							  <img class="play-btn" src="@/static/images/video-button.png"/>
							</div> -->
					</swiper-item>
				</template>
			</swiper>
			<view class="fixed-bottom">
				<view class="name font-ell1 fboxRow Ycenter font34 lh44">@{{ dataList[dataIndex].realName }}</view>
				<view
					class="content mt16 font-ell2 font30 lh44"
					v-if="dataList[dataIndex].dynamicContent"
					v-html="resetCon(dataList[dataIndex].dynamicContent)"
					style="white-space: pre-wrap;"
				></view>
				<view class="fboxRow Ycenter mt16 font26 color-ACB4C7">
					<text class="bw-Vector2 bwfont mr12" style="font-size: 20rpx;"></text>
					<text>{{ dataList[dataIndex].browseCount > 10000 ? (dataList[dataIndex].browseCount / 10000).toFixed(1) + 'W' : dataList[dataIndex].browseCount }}</text>
				</view>
			</view>
			<view class="fixed-right">
				<view class="avatar" @tap="attention">
					<image class="inner" mode="aspectFill" round :src="dataList[dataIndex].avatar" />
					<view class="attention fboxRow Ycenter Xcenter" v-if="userInfo.memberId != dataList[dataIndex].memberId">
						<u-icon v-if="dataList[dataIndex].isFollow == 0" name="plus" size="12" color="#F7F9FF"></u-icon>
						<u-icon v-else name="checkmark" size="12" color="#E8CDA7"></u-icon>
					</view>
				</view>
				<view class="fboxCol Ycenter mt40 font26" @click="linkTap">
					<u-icon name="thumb-up-fill" :color="dataList[dataIndex].isLike ? '#E8CDA7' : '#F7F9FF'" size="28"></u-icon>
					<text class="lh38">{{ dataList[dataIndex].likeNum > 10000 ? (dataList[dataIndex].likeNum / 10000).toFixed(1) + 'W' : dataList[dataIndex].likeNum }}</text>
				</view>
				<view class="fboxCol Ycenter mt32 font26">
					<u-icon name="chat-fill" color="#F7F9FF" size="28"></u-icon>
					<text class="lh38">
						{{ dataList[dataIndex].commentNum > 10000 ? (dataList[dataIndex].commentNum / 10000).toFixed(1) + 'W' : dataList[dataIndex].commentNum }}
					</text>
				</view>
				<!-- <view class="fboxCol Ycenter mt32 font26">
					<u-icon name="eye" color="#F7F9FF" size="26"></u-icon>
					<text
						class="lh38">{{ dataList[dataIndex].browseCount > 10000 ? (dataList[dataIndex].browseCount / 10000).toFixed(1) + 'W' : dataList[dataIndex].browseCount }}</text>
				</view> -->
				<view class="fboxCol Ycenter mt32 font26" @click="mutedChange"><u-icon :name="muted ? 'volume-off-fill' : 'volume-fill'" color="#F7F9FF" size="26"></u-icon></view>
			</view>
		</template>
		<not-login ref="notLogin" />
	</view>
</template>

<script>
import { getDynamicDetails, addAttention, manageAttention, circleVideoList, circleLikeV2, circleUnlikeV2 } from '@/api/h5.js';
export default {
	data() {
		return {
			theme: getApp().globalData.appTheme,
						globalColor: getApp().globalData.globalColor,
			detail: {},
			id: '',
			linkData: {
				id: ''
			},
			dataList: [],
			dataIndex: 0,
			videoContext: null,
			isPlay: false,
			muted: true
		};
	},
	onLoad(option) {
		if (uni.getStorageSync('bw_user_temp')) {
			this.userInfo = JSON.parse(uni.getStorageSync('bw_user_temp'));
		}
		if (option && option.id) {
			this.id = option.id;
			this.linkData.id = option.id;
			// this.getDetail();
			this.getList();
			uni.showLoading({
				mask: true,
				title: '加载中...'
			});
		}
		uni.setNavigationBarTitle({
			title: `点点详情`
		});
	},
	onShow() {},
	onReady: function(res) {
		this.videoContext = uni.createVideoContext('myVideo');
	},
	methods: {
		swiperChange(e) {
			// console.log(e)
			this.dataIndex = e.detail.current;
		},
		resetCon(con) {
			let text = con;
			const { bw_config } = getApp().getBWData(['bw_config']);
			const urls = con.match(/(https?|http)(:\/\/[-A-Za-z0-9+&@#/%?=~_|!:,.;]+[-A-Za-z0-9+&@#/%=~_|])/g);
			if (urls && urls.length) {
				bw_config.domainWhitelist.filter(item => {
					if (text.includes(item)) {
						const a = `(https?|http)(:\/\/.*${item}[-A-Za-z0-9+&@#/%?=~_|!:,.;]+[-A-Za-z0-9+&@#/%=~_|])`;
						const regx = new RegExp(a, 'g');
						text = text.replace(regx, "<a style='color:#E8CDA7' href='$1$2'>$1$2</a>");
					}
				});
			}
			return text;
		},
		// 关注
		attention(type) {
			const item = this.dataList[this.dataIndex];
			const { bw_user_temp, bw_params } = getApp().getBWData(['bw_params', 'bw_user_temp']);
			if (bw_params && bw_params.access_token && bw_user_temp && bw_user_temp.memberId) {
				let message = item.isFollow == 0 ? '已关注' : '取消关注';
				if (item.isFollow == 0) {
					// 未关注
					addAttention({
						othersId: item.memberId
					}).then(res => {
						uni.showToast({
							icon: 'none',
							title: message
						});
						this.dataList[this.dataIndex].isFollow = item.isFollow == 0 ? 1 : 0;
					});
				} else {
					let memberIdList = [item.memberId];
					manageAttention({
						memberIdList: memberIdList
					}).then(res => {
						uni.showToast({
							icon: 'none',
							title: message
						});
						this.dataList[this.dataIndex].isFollow = item.isFollow == 0 ? 1 : 0;
					});
				}
			} else {
				this.$refs.notLogin.openLogin({
					show: true,
					position: 'center'
				});
			}
		},
		linkTap() {
			const item = this.dataList[this.dataIndex];
			const { bw_user_temp, bw_params } = getApp().getBWData(['bw_params', 'bw_user_temp']);
			if (bw_params && bw_params.access_token && bw_user_temp && bw_user_temp.memberId) {
				let obj = {
					busMemberId: item.memberId,
					businessId: item.dynamicId,
					memberId: bw_user_temp.memberId
				};
				let api = item.isLike == 0 ? circleLikeV2 : circleUnlikeV2;
				let funcObj = {
					0: () => {
						item.isLike = 1;
						item.likeNum++;
					},
					1: () => {
						item.isLike = 0;
						item.likeNum--;
					}
				};
				api({
					...obj
				}).then(res => {
					funcObj[item.isLike]();
				});
			} else {
				this.$refs.notLogin.openLogin({
					show: true,
					position: 'center'
				});
			}
		},
		getList() {
			this.dataIndex = 0;
			circleVideoList({
				dynamicId: this.id
			})
				.then(res => {
					if (res.data) {
						this.dataList = res.data;
					}
				})
				.finally(() => {
					uni.hideLoading();
				});
		},
		// 详情
		getDetail() {
			getDynamicDetails({
				dynamicId: this.id
			})
				.then(res => {
					if (res.data) {
						this.detail = res.data;
					}
				})
				.finally(() => {
					uni.hideLoading();
				});
		},
		// 全屏播放事件
		fullscreenchange(e) {
			console.log('全屏---->', e.detail.fullScreen);
		},
		videoEnded() {
			console.log('videoEnded');
			if (this.dataIndex < this.dataList.length - 1) {
				this.dataIndex = this.dataIndex + 1;
			} else {
				this.dataIndex = 0;
			}
		},
		videoPlay() {
			console.log('videoPlay');
			this.videoContext.play(); //播放
			this.isPlay = true;
			// this.muted = false
		},
		videoPause() {
			this.videoContext.pause(); //暂停
			this.isPlay = false;
		},
		videoTap() {
			if (this.videoContext) {
				if (this.isPlay) {
					this.videoPause();
				} else {
					this.videoPlay();
				}
			}
			console.log('videoTap');
		},
		mutedChange() {
			this.muted = !this.muted;
		}
	}
};
</script>

<style lang="scss" scoped>
.video-full {
	width: 750rpx;
	height: calc(100vh);
	border-radius: 12rpx;
	position: relative;
	z-index: 0;
}

.fixed-bottom {
	position: fixed;
	left: 0;
	bottom: 0;
	text-shadow: 0 2rpx rgba(0, 0, 0, 0.5);
}

.fixed-right {
	position: fixed;
	right: 32rpx;
	bottom: 300rpx;
	text-shadow: 0 2rpx rgba(0, 0, 0, 0.5);
}

.avatar {
	width: 100rpx;
	height: 100rpx;
	position: relative;
}

.attention {
	position: absolute;
	bottom: -18rpx;
	left: 50%;
	margin: 0 0 0 -18rpx;
	width: 36rpx;
	height: 36rpx;
	background-color: #111216;
	border-radius: 50%;
}
.avatar .inner {
	width: 100rpx;
	height: 100rpx;
	border: 2rpx solid #f7f9ff;
	border-radius: 50%;
}
</style>
